<script setup lang="ts">
import { ref } from "vue";
import type { TravelGuides } from "@/types/home";
import { onLoad } from "@dcloudio/uni-app";
import { loadTravelGuidesUsingDetailGet } from "@/services/home";
import uParse from "@/components/gaoyia-parse/parse";

const query = defineProps<{ id: string }>();
const loadTravelGuidesUsingDetail = ref<TravelGuides>();
const loadTravelGuidesUsingDetailGetData = async () => {
  const res = await loadTravelGuidesUsingDetailGet(query.id);
  console.log("res.data:", res.data);
  loadTravelGuidesUsingDetail.value = res.data;
};
onLoad(() => {
  loadTravelGuidesUsingDetailGetData();
});
</script>
<template>
  <view class="guide-container">
    <!-- Travel Guide Title -->
    <view class="guide-title">{{ loadTravelGuidesUsingDetail?.guideTitle }}</view>

    <!-- Author and Remark -->
    <view class="guide-meta">
      <view class="guide-author">作者: {{ loadTravelGuidesUsingDetail?.author }}</view>
    </view>
    <image class="guide-img" :src="loadTravelGuidesUsingDetail?.guideImg" mode="widthFix" />
    <!-- Travel Guide Content -->
    <u-parse :content="loadTravelGuidesUsingDetail?.guideContent" />
    <!-- Travel Guide Image -->
    <view class="guide-remark">{{ loadTravelGuidesUsingDetail?.remark }}</view>
  </view>
</template>

<style lang="scss">
.guide-container {
  padding: 20px;
}

.guide-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.guide-meta {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.guide-author {
  margin-bottom: 5px;
}

.guide-remark {
  margin-bottom: 5px;
  font-weight: bold;
  text-align: right;
}

.guide-content {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 20px;
}

.guide-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
</style>
